<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view class="huokeRecord">
			<view class="huoke">
				<view class="title">获客记录</view>
				<view class="line"></view>
				<scroll-view scroll-y style="height: 311px;" @scrolltolower="scrolltolower" v-if="huokeData.length > 0">
					<view class="content">
						<view class="content-item" v-for="(item, index) in huokeData" :key="index"
							@click="showHuokeInfo(item)">
							<view class="content-item-time u-line-1">
								{{ nowTime - item.time < 3600 ? `${Math.ceil((nowTime - item.time) / 60)}分钟前` : nowTime
									- item.time < 24 * 3600 ? `${Math.ceil((nowTime - item.time) / 3600)}小时前` :
									`${Math.ceil((nowTime - item.time) / 24 / 3600)}天前` }} </view>
									<view class="content-item-content">{{ item.content }}</view>
									<view class="content-item-user u-line-1">查看详情</view>
							</view>
							<view class="content-item-bottom">{{ hasMore ?
								'-- 加载中 --' : '-- 已经到底了 --' }}</view>
						</view>
				</scroll-view>
				<view v-else style="height: 250px; display: flex; align-items: center;justify-content: center;">
					<u-empty mode="list">
					</u-empty>
				</view>
			</view>
			<view>
				<u-popup :show="huokeShow" safeAreaInsetBottom mode="bottom" @close="showClose" closeOnClickOverlay
					round="10" bgColor="#071745" :customStyle="{ maxHeight: '80vh' }">
					<view class="popup_con">
						<view class="popup_con_title">
							<view>查看详情</view>
							<view><u-icon name="close" color="#fff" size="18" @click="showClose"></u-icon></view>
						</view>
						<view class="showList">
							<view class="showItem">
								<view class="title">时间:</view>
								<view class="value">{{ $u.timeFormat(curHuokeData.time, 'yyyy年mm月dd日 hh时MM分') }}
								</view>
							</view>
							<view class="showItem">
								<view class="title">姓名:</view>
								<view class="value">{{ curHuokeData.user }}</view>
							</view>
							<view class="showItem">
								<view class="title">手机号:</view>
								<view class="value">{{ curHuokeData.tel }}</view>
							</view>
							<view class="showItem">
								<view class="title">所在城市:</view>
								<view class="value">{{ curHuokeData.province }}{{ curHuokeData.city ? '-' +
									curHuokeData.city : '' }}</view>
							</view>
							<view class="showItem" style="flex-direction: column;gap: 8px;align-items: normal;">
								<view class="title">其他信息:</view>
								<view class="value">{{ curHuokeData.info ? curHuokeData.info : '暂无信息' }}</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			huokeData: [],
			hasMore: true,
			info: {
				page: 1,
				page_num: 10
			},
			nowTime: 0,
			huokeShow: false,
			curHuokeData: {
				time: 0,
				user: '',
				tel: 0,
				city: '',
				province: '',
				info: '',
			},
		};
	},
	onLoad() {
		// 判断用户是否登录，如果没有登录则跳转到登录页面
		if (!this.userinfo || !this.userinfo.id) {
			// 清空缓存
			this.toLogin();
			return;
		}
		this.getHuokeData(1);
		this.nowTime = Math.floor(+new Date() / 1000);
		// 定时器，每秒获取当前时间戳 s
		this.timer = setInterval(() => {
			// 获取当前时间s
			this.nowTime = Math.floor(+new Date() / 1000);
		}, 1000)
	},
	methods: {
		// 时间戳s转成日期

		showClose() {
			this.huokeShow = false;
		},
		showHuokeInfo(data) {
			this.curHuokeData = data

			this.$nextTick(() => {
				this.huokeShow = true;
			})
		},
		getHuokeData(page) {
			if (page) {
				this.info.page = page;
			}
			this.moxiPost(
				'/plugin/huoke/index/index/record',
				this.info,
				(res) => {
					console.log(res.data.data);
					let tempData = []
					tempData = res.data.data
					tempData.forEach(item => {
						this.huokeData.push({
							time: item.c_time,
							user: item.name,
							content: '获取1条新线索',
							tel: item.tel,
							city: item.city,
							province: item.province,
							info: item.info
						})
					});
					if (tempData.length < this.info.page_num) {
						this.hasMore = false;
					}
				}
			)
		},
		scrolltolower() {
			if (this.hasMore) {
				this.info.page++;
				this.getHuokeData();
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.huokeRecord {
	flex: 1;
	position: relative;
	padding: 12px 16px;

	.huoke {
		background: rgba(3, 41, 150, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.15);
		box-shadow: 2px 4px 4px 3px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(16.8px);
		border-radius: 12px;
		padding: 18px 20px;
		display: flex;
		flex-direction: column;
		gap: 16px;

		.title {
			font-size: 16px;
			color: #B0D8F5;
			text-align: center;
		}

		.line {
			height: 2px;
			width: 100%;
			background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF 50%, #FFFFFF00 100%);
			opacity: .3;
		}

		.content {
			display: flex;
			flex-direction: column;
			gap: 16px;
			flex: 1;

			&-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 4px;
				font-size: 12px;

				&.active {
					transform: translateY(-28px);
					animation: bottom 1s ease-in-out;
					transform: translateY(0);
				}

				&-time {
					width: 60px;
					color: #FFFFFF;
				}

				&-content {
					color: #1490F6;
				}

				&-user {
					width: 60px;
					text-align: right;
					color: #FFFFFF;
					opacity: .5;
				}

				&-bottom {
					text-align: center;
					color: #FFFFFF;
					opacity: .5;
					font-size: 10px;

					&.active {
						animation: bottom 1s ease-in-out;
						transform: translateY(0);
					}
				}
			}
		}
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		background-image: url('https://img.moxikeji.net/site/160/250624/685a0c3c861b4.png');
		background-size: 40px 40px;
		opacity: .3;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #00164F;
		z-index: -2;
	}
}

.popup_con {
	padding-top: 36px;
	display: flex;
	flex-direction: column;
	position: relative;
	flex: 1;
	overflow: hidden;
	color: #fff !important;

	&_title {
		position: absolute;
		left: 15px;
		top: 13px;
		font-size: 18px;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 30px);
	}

	&_close {
		width: 16px;
		height: 16px;
		position: absolute;
		right: 15px;
		top: 15px;
	}

	.showList {
		width: calc(100% - 32px);
		overflow: hidden scroll;
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px;


		.showItem {
			display: flex;
			gap: 32px;
			justify-content: space-between;
			align-items: center;

			padding-bottom: 8px;
			border-bottom: 0.5px solid #ffffff16;

			&:last-child {
				border-bottom: 0;
			}

			.title {
				white-space: nowrap;

			}

			.value {
				word-break: break-word;
			}
		}
	}

	&_noData {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 30vh;
	}
}
</style>
